<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<style type="text/css">
	.col-sm-9 {
	    width: auto;
	}
	.form-horizontal .row table th{
		text-align: center;
		vertical-align:middle;
	}
	.form-horizontal input{
	    width:110px;
		border:none;
		border-bottom: 1px solid #f4f4f4;
	}
</style>

<form id="dicn-form" class="form-horizontal"
	name="ui-adminlte-form" data-toggle="validator"
	role="form" method="post"
	action="${pageContext.request.contextPath}/sys/dictName!save.action"
	forward-action="${pageContext.request.contextPath}/sys/dictName!list.action">
	<s:token></s:token>
	<input name="id" value="${entity.dicnId}" type="hidden" />

		<div class="row">
			<table id="dicnHeads" class="table table-bordered table-hover dataTable no-footer" >
				<tbody>
					<tr>
						<th>字典名称</th>
						<td class="form-group">
							<div class="col-sm-9">
								<input type="text" name="entity.dicName" value="${entity.dicName}" class="form-control required"
										remote="${pageContext.request.contextPath}/sys/dictName!checkDicName.action?id=${entity.dicnId}" />
							</div>
						</td>
						<th>字典代码</th>
						<td class="form-group">
							<div class="col-sm-9">
								<input type="text" name="entity.dicnCode" value="${entity.dicnCode}" class="form-control required" />
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="row">
			<table id="listDicvs" class="table table-bordered table-hover">
				<thead>
					<tr>
						<th style="width:38%">字典值名称</th>
						<th style="width:38%">字典值</th>
						<th style="width:20%">操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${entity.dicvs}" var="dicv" varStatus="row">
						<tr id="${dicv.dicvId}">
							<td style="display: none;">
								<input type="hidden" name="dicvIds" value="${dicv.dicvId}" />
							</td>
							<td class="form-group">
								<div class="col-sm-9">
									<input name="dicvTexts" id="textID${row.count}" value="${dicv.dicvText}"
										class="dicv-name form-control required notEqualToGroup" type="text" />
								</div>
							</td>
							<td class="form-group">
								<div class="col-sm-9">
									<input name="dicValues" id="valueID${row.count}" value="${dicv.dicValue}"
										class="dicv-value form-control required notEqualToGroup" type="text" />
								</div>
							</td>
							<td>
								<button type="button"
										title="上移"
										data-toggle="tooltip"
										data-placement="bottom"
										class="btn btn-default btn-sm btn-up">
										<i class="fa fa-arrow-up"></i>
								</button>
								<button type="button"
										title="下移"
										data-toggle="tooltip"
										data-placement="bottom"
										class="btn btn-default btn-sm btn-down">
										<i class="fa fa-arrow-down"></i>
								</button>
								<button type="button"
										title="删除"
										data-toggle="tooltip"
										data-placement="bottom"
										data-id="${dicv.dicvId}"
										class="btn btn-default btn-sm btn-del">
										<i class="fa fa-trash"></i>
								</button>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div>
				<button type="button" class="btn btn-primary btn-add-dicv" style="margin:10px 0px 0px 10px">
					添加栏位
				</button>
			</div>
		</div>
</form>

<script>

	$(function() {

		//form初始化
		form.init();

		//字典值上移
		function up(obj) {
			var trs = $("#listDicvs").find("tr");
			for (var i = 0; i < trs.length; i++) {
				$(trs[i]).removeAttr("style");
				$(trs[i]).find("input").each(function(index, item){
					$(item).css("background-color","#fff");
				});
			}
			if ($(obj.parentNode.parentNode).index() != '0') {
				$(obj.parentNode.parentNode).prev().before($(obj.parentNode.parentNode));
				$(obj.parentNode.parentNode).css("background-color","#f4f4f4");
				$(obj.parentNode.parentNode).find("input").each(function(index,item){
					$(item).css("background-color","#f4f4f4");
				});
			}
		}

		//给当前页面的上移按钮绑定事件
		$(".btn-up").bind("click", function(){ up(this); });

		//字典值下移
		function down(obj) {
			var trs = $("#listDicvs").find("tr");
			for (var i = 0; i < trs.length; i++) {
				$(trs[i]).removeAttr("style");
				$(trs[i]).find("input").each(function(index,item){
					$(item).css("background-color","#fff");
				});
			}
			if ($(obj.parentNode.parentNode).index() != $("#listDicvs").find("tr").last().index()) {
				$(obj.parentNode.parentNode).next().after($(obj.parentNode.parentNode));
				$(obj.parentNode.parentNode).css("background-color","#f4f4f4");
				$(obj.parentNode.parentNode).find("input").each(function(index,item){
					$(item).css("background-color","#f4f4f4");
				});
			}
		}

		//给当前页面的下移按钮绑定事件
		$(".btn-down").bind("click", function(){ down(this); });

		//删除字典值
		function delDom(obj){
			var id = $(obj).attr("data-id");
			if(id == ''){//删除手动添加的dom
				$(obj.parentNode.parentNode).remove();
			}else{//删除数据库已存在的字典值
				var callBack = function(id, modal) {
					var url = '${pageContext.request.contextPath }/sys/dictName!deleteDicv.action?id='+id;
					$.post(url, function(msg){
						modal.modal('hide');
						msg = util.strToObj(msg);
						dialog.alert(msg.desc);
						if(msg.code == "success"){
							$(obj.parentNode.parentNode).remove();
						}
					});
				};
				dialog.confirm(id, callBack, 'btn-del');
			}
		}

		//给当前页面的删除按钮绑定事件
		$(".btn-del").bind("click", function(){ delDom(this); });

		//添加字典值栏位
		function addDicv() {
			var dicvTextsId = 'textID1';
			var dicValuesId = 'valueID1';
			if ($("#listDicvs").find("tr").length != 1) {
				var tr = $("#listDicvs").find("tr").last();
				var lastDicvTextsId = tr.find("input[name='dicvTexts']").attr("id");
				var lastDicValuesId = tr.find("input[name='dicValues']").attr("id");
				dicvTextsId = 'textID' + (lastDicvTextsId.substring(6)-0+1);
				dicValuesId = 'valueID' + (lastDicValuesId.substring(7)-0+1);
			}
			$("#listDicvs").find("tbody").append(
					"<tr>"
							+ "<td style='display:none'>"
							+ "<input type='hidden' name='dicvIds'/>"
							+ "</td>"
							+ "<td class='form-group'>"
							+ "<div class='col-sm-9'>"
							+ "<input name='dicvTexts' id='" + dicvTextsId + "' class='dicv-name form-control required notEqualToGroup' type='text' />"
							+ "</div>"
							+ "</td>"
							+ "<td class='form-group'>"
							+ "<div class='col-sm-9'>"
							+ "<input name='dicValues' id='" + dicValuesId + "' class='dicv-value form-control required notEqualToGroup' type='text' />"
							+ "</div>"
							+ "</td>"
							+ "<td>"
							+ "<button type='button' title='上移' data-toggle='tooltip' data-placement='bottom' class='btn btn-default btn-sm btn-up'><i class='fa fa-arrow-up'></i></button>"
							+ "<button type='button' title='下移' data-toggle='tooltip' data-placement='bottom' class='btn btn-default btn-sm btn-down'><i class='fa fa-arrow-down'></i></button>"
							+ "<button type='button' title='删除' data-toggle='tooltip' data-placement='bottom' data-id='' class='btn btn-default btn-sm btn-del'><i class='fa fa-trash'></i></button>"
							+ "</td>"
							+"</tr>");

			$(".btn-up").last().bind("click", function(){ up(this); });
			$(".btn-down").last().bind("click", function(){ down(this); });
			$(".btn-del").last().bind("click", function(){ delDom(this); });
		}

		//绑定添加事件
		$(".btn-add-dicv").click(function(){ addDicv(); });

	});

</script>
